<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件化的使用</title>
	</head>
	<body>
		<div id="app">
			<!-- 组件的使用，如果我们的标签使用驼峰命名就用 — 连接各个字符
			      html表亲解后都会变成小写
			 -->
			<add-num-com></add-num-com>
			<hello1></hello1>
			<hello2></hello2>
		</div>
		<!-- 2.2定义模板html 要求模板必须有根目录-->
		<template id="addNumTem">
			<div>
				<h3>测试组件用法</h3>
				数据：{{num}}
				<button @click="addNum">点击</button>
			</div>

		</template>

		<!-- 组件化模板的htmlyemain的渲染效果 -->
		<template id="hello1Tem">
			<div>
				数据信息：{{msg}}
			</div>

		</template>
		<template id="hello2Tem">
			<div>
				数据信息：{{msg}}
			</div>

		</template>


		<script src="../js/vue.js"></script>
		<script src="../js/axios.js"></script>
		<script>
			//2.定义全局的组件
			//  Vue.component("组件的名称",{组件的内容})
			Vue.component("addNumCom", {
				//2.1/定义属性
				data() {
					return {
						num: 1
					}
				},
				//2.2定义组件模板，编辑html/js/css
				template: "#addNumTem",
				methods: {

					addNum() {
						this.num++
					}

				}
			})

			/* 	Vue.component("adder", {
					data() {
						return {
							num: 2
						}
					}
				}) */


			//2.定一个局部组件实体
			let hello1 = {
				//
				data() {
					return {
						msg: '我是组件A'
					}
				},
				template: '#hello1Tem'

			}
			let hello2 = {
				//
				data() {
					return {
						msg: '我是组件B'
					}
				},
				template: '#hello2Tem'

			}


			//1.定义vue对象
			const app = new Vue({

				el: '#app',
				data: {},
				//定义的局部组件只能在div是app中使用
				components: {
					//组件的名称:组件的内容
					hello1: hello1,
					hello2: hello2




				},
				methods: {

				},
				//计算属性的方法
				computed: {

				},

				created() {

				}
			})
		</script>
	</body>
</html>
